<template>
	<view>
		<view class="you row">
		  <image class="headimg" src="/static/images/lib/mainimg2.png"  />
		  <view class="main">
		    <view class="nickname">西安市西安市</view>
		    <view class="msg">
		      <view class="corner"></view>
		      <view class="interview">
		        <view class="jobname row">{{item.jobName}}
		          <view class="maney">{{item.salary}}</view>
		        </view>
		        <view class="company">{{item.company}}</view>
		        <view class="demandlist row">
		          <text class=""  v-for="(demand,index) in item.demandList" :key="index"  >{{index==0?demand:"&nbsp;| "+demand}}</text>
		        </view>
		        <view class="user row">
		          <image class="" :src="item.headImg"></image>
		          <text class="username">{{item.userName}}</text>
		          ·
		          <text class="position">{{item.position}}</text>
		        </view>
		         <view class="title">{{item.title}}</view>
		         <view class="time">{{item.time}}</view>
		         <view class="content">{{item.content}}</view>
		         <view class="state">前往面试</view>
		         <view class="validtime">有效期：{{item.validTime}}</view>
		      </view>
		      </view>
		  </view>
		</view>
		<view class="my row">
		  <image class="headimg" src="/static/images/lib/mainimg2.png" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="" />
		  <view class="main">
		    <view class="msg">
		      <view class="corner"></view>
		      hello word!
        </view>
		  </view>
		</view>
		
		
		<view class="input">
		  <input class="" v-model="msg" value="" type="text"  placeholder="说点什么.." placeholder-style="" placeholder-class="input-placeholder"
		    maxlength="140" focus="false" bindinput="" bindfocus="" bindblur="" bindconfirm="">
		  </input>
		  <view class="send" @click="send()">
		    <image class="" src="/static/images/icon/you.png"   />
		  </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				item: {
				      jobName: "平面设计师",
				      salary: "5K-10k/月",
				      company: "西安市xx有限公司",
				      demandList: ["西安", "1年经验", "大专以上"],
				      headImg: "/static//images/lib/headimg.png",
				      userName: "李悦",
				      position: "人事",
				      title:"您好！",
				      time: "07月20日 14:25",
				      content: "我们已查看您的简历，经过初步审核你的简历基本符合我们的招聘要求， 现在您可点击以下链接根据面试我们的问题进行面试！ ",
				      state:1,
				      validTime: "07月21日 14:25"
				    }
			};
		},
    onLoad(opt) {
      console.log(opt)
      // this.$emit('showbox','the msg');
      uni.setNavigationBarTitle({
        title:opt.name+12
      })
    },
	}
</script>

<style lang="less">
page{
  background: #f5f5f5;
  height: 100%;
}
.headimg{
  width: 100rpx;
  height: 100rpx;
  margin:0 25rpx;
}
.you,.my{
  align-items: flex-start;
  margin-top: 70rpx;
  .msg{
    background: #fff;
    position: relative;
    padding: 20rpx 27rpx;
    border-radius:15rpx;
    .corner {
      @h: 20rpx;
      background: #fff;
      width: @h ;
      height: @h;
      transform: rotate(45deg);
      position: absolute;
      top: 20rpx;
    }
  }
}
.you{
  .nickname{
    font-size: 30rpx;
    line-height: 40rpx;
    color: #333333;
  }
  .corner{
    left: -10rpx;
  }
}
.my{
  flex-direction: row-reverse;
  .msg{
    background: #0082e4;
    color: #fff;
    .corner {
      background: #0082e4;
      right: -10rpx;
    }
  }
}

.interview{
  width: 480rpx;
   .jobname {
     font-size: 30rpx;
     color: #333333;

     .maney {
       font-size: 32rpx;
       color: #ff4a4a;
       margin-left: auto;
     }
   }

   .company {
     font-size: 24rpx;
     color: #94a0ae;
     margin-top: 10rpx;
   }

   .demandlist {
     font-size: 28rpx;
     color: #333333;
     margin-top: 15rpx;
   }

   .user {
     margin-top: 20rpx;
     font-size: 24rpx;
     line-height: 20rpx;
     color: #333333;

     image {
       width: 40rpx;
       height: 40rpx;
     }

     text {
       margin: 0 15rpx;
     }
   }
  .title{
    font-size: 32rpx;
    color: #333333;
    margin-top: 30rpx;
   }
   .time{
     font-size: 24rpx;
     color: #94a0ae;
     margin-top: 18rpx;
   }
   .content{
     font-size: 28rpx;
     line-height: 40rpx;
     color: #666666;
     margin-top: 30rpx;
   }
   .state{
    text-decoration: underline;
    font-size: 28rpx;
    line-height: 40rpx;
    color: #0082e4;
   }
  .validtime{
    font-size: 24rpx;
    line-height: 20rpx;
    color: #94a0ae;
    margin-top: 10rpx;
   }
}
.input{
  height: 100rpx;
  padding: 20rpx 30rpx;
  position: fixed;
  bottom: 0rpx;
  left: 0rpx;
  width: 100%;
  background: #fff;
  input{
    border-radius: 50rpx;
    background: #f5f5f5;
    font-size: 28rpx;
    color: #999999;
    padding:0rpx 40rpx;
    height: 60rpx;
    line-height: 60rpx;
  }
}
.send{
  width: 60rpx;
  height: 60rpx;
  background: #0082e4;
  border-radius: 100%;
  padding:11rpx 16rpx;
  position: absolute;
  right: 30rpx;
  top: 20rpx;
  image{
    width: 38rpx;
    height:28rpx;
  }
}
</style>
